<template>
   <div>
     <el-table
    :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
    style="width: 100%" 
   border="true"
    >
     <el-table-column class="el-size"
      label="ID"
      width="100px"
      prop="id">
    </el-table-column>
    <el-table-column class="el-size"
      label="姓名"
      width="100px"
      prop="name">
    </el-table-column>
     <el-table-column
      label="手机号码"
      prop="phone"
      width="110px"
      >
    </el-table-column>
    
    <el-table-column
      label="处理状态"
      width="80px"
      prop="status">
      <template slot-scope="scope">
					<el-tag size="small" v-if="scope.row.status ===0" type="info" >未处理</el-tag>
					<el-tag size="small" v-else-if="scope.row.status ===1" type="primary" >已受理</el-tag>
					<el-tag size="small" v-else-if="scope.row.status ===2" type="primary" >已转发</el-tag>
          	<el-tag size="small" v-else-if="scope.row.status ===3" type="danger" >已驳回</el-tag>
            <el-tag size="small" v-else-if="scope.row.status ===4" type="primary" >处理中</el-tag>
					<el-tag size="small" v-else-if="scope.row.status ===5" type="warning" >已结案</el-tag>
          	<el-tag size="small" v-else-if="scope.row.status ===6" type="success" >已归档</el-tag>
				</template>
    </el-table-column> 
     <el-table-column
      label="地址"
      width="130px"
      prop="address">
    </el-table-column>   
     <el-table-column
      label="备注"
      width="150px"
      prop="remarks">
    </el-table-column>  
     <el-table-column
      label="案件描述"
       width="150px"
      prop="casfile">
      </el-table-column>  
        <el-table-column
      label="处理人"
      width="100px"
      prop="handler">
    </el-table-column>      
<el-table-column
      label="证据文件"
       width="80px"
      prop="file">
       <template slot-scope="scope">
        <div class="bule-font-color"  @click="downLoad(scope.row.file)" v-if="scope.row.file"><font color="#409EFF">查看文件</font></div>
      </template>
      </el-table-column> 
     
    
    <el-table-column
      align="right">
      <template slot="header" slot-scope="scope">
        <el-input
          v-model="search"
          size="mini"
          placeholder="输入关键字搜索"/>
      </template>
      <template slot-scope="scope">
       
        <el-button
          size="mini"
          type="success"
          v-if="hasAuth('sys:visits:accept')"
          @click="handleAcceptance(scope.$index, scope.row)">受理</el-button>
           <el-button
          size="mini"
          type="primary"
          v-if="hasAuth('sys:visits:forward')"
          @click="handleForward(scope.row.id)">转发</el-button>
        <el-button
          size="mini"
          type="danger"
          v-if="hasAuth('sys:visits:reject')"
          @click="handleReject(scope.$index, scope.row)">驳回</el-button>
      </template>
    </el-table-column>
  </el-table>
  	<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				layout="total, sizes, prev, pager, next, jumper"
				:page-sizes="[5, 10, 20, 50]"
				:current-page="current"
				:page-size="size"

				:total="total">
		</el-pagination>
    
	<el-dialog
				title="备注"
				:visible.sync="dialogVisible"
				width="600px"
				:before-close="handleClose">

			<el-form :model="editForm" ref="editForm" label-width="100px" class="demo-editForm">
     	<el-form-item label="ID" prop="id" label-width="100px">
					<el-input style="width: 300px" v-model="editForm.id" autocomplete="off"></el-input>
				</el-form-item>
       <el-form-item label="姓名" prop="name" label-width="100px">
					<el-input style="width: 300px" v-model="editForm.name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="备注" prop="remarks" label-width="100px">
					<el-input style="width: 300px" v-model="editForm.remarks" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitForm('editForm')" style="display:block;margin:0 160px">提交</el-button>
					
				</el-form-item>
			</el-form>

		</el-dialog>

		<el-dialog
				title="转发"
				:visible.sync="permDialogVisible"
				width="600px">

			<el-form :model="permForm">

				<el-tree
						:data="permTreeData"
						show-checkbox
						ref="permTree"
						:default-expand-all=true
						node-key="id"
            @check-change="handleNodeClick"
						:check-strictly=true
						:props="defaultProps">
				</el-tree>

			</el-form>

			<span slot="footer" class="dialog-footer">
			    <el-button @click="permDialogVisible = false">取 消</el-button>
			    <el-button type="primary" @click="submitPermFormHandle('permForm')">确 定</el-button>
			</span>

		</el-dialog>
      </div>
    </template>


<script>

export default {
name:"Visit", 
data() {
      return {
        tableData: [],
        search: '',
        dialogVisible: false,
        isHandle:'',
				editForm: {

				},
        userId:'',
       	permDialogVisible: false,
				permForm: {},
				defaultProps: {
					children: 'children',
					label: 'name'
				},
				permTreeData: []
      }
    },
    methods: {
      handleAcceptance(index, row) {
       this.editForm = row
       this.dialogVisible = true
       this.isHandle=true
      },
      handleForward(id) {
        this.userId=id
      this.permDialogVisible = true
      console.log(this.userId)
		   this.$axios.get('/sys/menu/organizationlist').then(res => {
				this.permTreeData = res.data.data
			})
      },
       handleReject(index, row) {
         this.editForm = row
       this.dialogVisible = true
       this.isHandle=false
      },
      handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.size = val
				this.getTodayList()
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.current = val
				this.getTodayList()
			},
      handleClose() {
				this.dialogVisible = false
			},
      handleNodeClick(data, checked, node) {
    if(checked === true) {
        this.checkedId = data.id;
        this.$refs.permTree.setCheckedKeys([data.id]);
    } else {
        if (this.checkedId == data.id) {
            this.$refs.permTree.setCheckedKeys([data.id]);
        }
    }
},
		submitForm(formName) {
      this.$axios.post('/file/'+(this.isHandle?'accept':'reject'),this.editForm).then(res =>{
         if(res.data){
             this.$message({
						showClose: true,
						message: "操作成功",
						type: 'success',
						onClose:() => {
							this.getTodayList()
						}
					});
           this.dialogVisible=false;
         }else{
           this.$message({
            showClose: true,
						message: "操作失败",
						type: 'error',
           })
         }
         
      })
    }
    ,
      getTodayList(){
        this.$axios.get("/file/list",	{params: {
						current: this.current,
						size: this.size
					}}).then(res => {
          const data=res.data.data.records
           this.tableData=data
          this.size = res.data.data.size
					this.current = res.data.data.current
					this.total = res.data.data.total
					// data.forEach(element => {
          //   element.file="https://www.gjtool.cn/pdfh5/git.pdf"
          // });
         
				})
      },
      downLoad(url){
      console.log("地址=",url)
     window.open(url);
    },

    	submitPermFormHandle(formName) {	
      var  data=	this.$refs.permTree.getCheckedNodes()
		 console.log(data[0].name);
      console.log(this.userId)
      this.$axios.get("/file/forward",{params: {
						id: this.userId,
						organization: data[0].name
					}}).then(res=>{

          if(res.data){
            this.$message({
						showClose: true,
						message: "操作成功",
						type: 'success',
						onClose:() => {
							this.getTodayList()
						}
					});
          }
         
      })
      this.permDialogVisible=false
			},
    
    },
     created(){
      this.getTodayList()  
     	
    },
  
		
		}
	
    
    

</script>

<style>
.my-label {
    background: #E1F3D8;
  }

  .my-content {
    background: #FDE2E2;
  }
  .el-size{
    width: 20px;
  }
  .el-pagination {
    text-align: center; 
}
</style>
